<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/inndex.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/pagination.css">
    <script src="../javascripts/jQuery.js"></script>
</head>
<body>
    <header class="header">
        <div class="logo">
           <img src="http://www.fiyta.com.cn/dist/images/logo.png" alt="">
            </div>
            <div class="top">
                <ul class="list">
                    <li>快速选表</li>
                    <li>男士腕表</li>
                    <li>女士腕表</li>
                    <li>情侣腕表</li>
                    <li>关于品牌</li>
                    <li>客户服务</li>
                </ul>
                <ul class="list1">
                  <li><i class="iconfont icon-denglu"></i></li>
  
                  <li><i class="iconfont icon-gouwuche"></i></li>
                  <li><i class="iconfont icon-sousuo"></i></li>
              </ul>
            </div>
       
    </header>
    <div class="banner">
      <img src="http://www.fiyta.com.cn/upload//%E9%A3%9E%E4%BA%9A%E8%BE%BE%E5%8D%B0%E7%B3%BB%E5%88%97%E6%83%85%E4%BE%A3%E8%85%95%E8%A1%A8.jpg" width="100%" alt="">
    </div>

        <div class="container">

        </div>

        <div class="pagination">

      </div>
      
           
        
        <script src="../javascripts/jquery.pagination.js"></script> 
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
      <script>
            $(function () {
                  $.ajax({
                        url: "../static/json/data.json",
                        success: function (res) {
                              render(res.data);
                        }
                  })
                  function render(res) {

                        $(".container").html(
                              res.map(item =>
                                    ` <div class="box">
                                          <img data-original="${item.img}" alt="">
                                          <h2>${item.title}</h2>
                                          <p1>${item.model}</p1>
                                          <p2>￥${item.price}</p2>
                                          <p3><button class="add_cart" data-id=${item.id}>探索此款手表</button></p3>
                                    </div> `
                              )
                        )
                        
                  
                        $(".box img").lazyload({
                              effect: "fadeIn",
                              threshold: -200,
                        });

                  }
            });
            $(function () {
            $(".pagination").pagination(100, {
                  callback: pageSelectCallback,
                  num_edge_entries:0,
                  current_page : 4,
                  num_display_entries : 5
            });

            function pageSelectCallback( index ){
                  console.log(index);
            }
            });
      </script>
      
</body>
</html>